<template>
  <div class="reportcharts">
    <h2>{{title}}</h2>
    <div class="echardiv">
      <div class="repData" :id="id"></div>
    </div>
  </div>
</template>

<script>
  let echarts = require("echarts");
  export default {
    props:{
      id:'',
      title:''
    },
    data() {
      return {
        option: {
          title: {
            text: '',
            left: 'center',
            textStyle: {
              color: '#ccc',
              fontSize: 16,
            }
          },
          legend: {
            data: [],
            top: 20
          },
          color: ['#2c69f3'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: '',
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: {
            name: '',
            type: 'bar',
            barMaxWidth: '50px',
            data: '',
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        },
        defaultOtion: {
          title: {
            show: true,
            text: "暂 无 数 据",
            textAlign: 'center',
            left: '48%',
            top: '45%',
            textStyle: {
              fontSize: 16,
              color: '#b4b6bd',
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
          backgroundColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0, color: '#f5f8fe' // 0% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          series:[]
        },
        myChart: null
      }
    },
    mounted(){
      
      //点击收缩按钮
      this.$Bus.$on("ArrowClick", w => {
        this.loadEchartResize(w);
      });
      this.myChart = echarts.init(document.getElementById(this.id));
      // setTimeout(() => {
      //   this.loadEchartResize("");
      // }, 200);
    },
    beforeDestroy(){
      this.$Bus.$off('ArrowClick');
    },
    methods:{
      setOption(val){
        if(val==false){
          this.myChart.setOption(this.defaultOtion,true);
          return
        }
        this.option.series.data = val.data
        this.option.xAxis.data = val.x_data
        this.option.title.text = val.title
        this.option.legend.data[0] = val.kpiName
        this.option.series.name = val.kpiName

        this.$nextTick(()=>{
          this.myChart.setOption(this.option,true)
          
        })
      },
      loadEchartResize(w) {
        let opts;
        if(this.isEmpty(w)){
           opts = { width: w+100 };
        }
        else {
          let con_w = $(".echardiv").width();
          opts = { width: con_w };
        }
        this.myChart.resize(opts);
      },
      isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
          return false;
        } else {
          return true;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .reportcharts{
    width: 100%;
    height: 520px;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
      display: inline-block;
      margin-right: 20px;
    }
    .echardiv{
      width: 100%;
      height: 420px;
      margin-top: 20px;
      .repData {
        width: 100%;
        height: 420px;
      }
    }

  }

</style>